<template>
  <div class="newspaper-page">
    <div class="content" ref="contentRef">
      <div class="item" v-for="item in list" :key="item.id" ref="coverRef" @click="goArticle(item.articleId)">
        <img :src="item.cover" alt="">
        <div class="article" v-for="article in item.articleList"
        :style="
        'left:'+ (article.linkStartX * scale) + 'px; top:'+ (article.linkStartY * scale) + 'px; width:'+ (article.linkWidth * scale) + 'px; height:'+ (article.linkHeight * scale) + 'px;'"></div>
        </div>
      </div>
    </div>
</template>
<script setup>
import { listNewspaperPageApi } from "@/api/mock";
import { useElementSize } from '@vueuse/core'
const contentRef = ref(null)
const { width } = useElementSize(contentRef)

// 计算缩放比例 图片固定500宽度 
const scale = computed(() => {
  return width.value / 500
})
const list = ref([])
const route = useRoute()
const newspaperId = route.query.newspaperId
listNewspaperPageApi(newspaperId).then(data => {
  list.value = data
})

const router = useRouter()
const goArticle = (articleId) => {
  router.push({ name: "article", query: { articleId } });
}
</script>
<style scoped lang="scss">
.newspaper-page {
  height: 100%;
  padding: 10px;

  .item {
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;

    img {
      width: 100%;
    }

    .article {
      position: absolute;
      background: #32b1ff40;
      z-index: 1;
    }
  }
}
</style>
